<script type="text/javascript">
	$(window).load(function(){
		  

	$(function(){
		
	            collage();
	           
		 
	            
	});
	});



	    // Here we apply the actual CollagePlus plugin
	    function collage() {
	        $('.Collage').removeWhitespace().collagePlus(
	            {
	                'fadeSpeed'     : 500,
	                'targetHeight'  : 200,
	                'allowPartialLastRow' : true
	            }
	        );
	    };
	    
	    function collage_sm(){
	    	 $('.Collage_sm').removeWhitespace().collagePlus(
	    	            {
	    	                'fadeSpeed'     : 500,
	    	                'targetHeight'  : 200,
	    	                'allowPartialLastRow' : true
	    	            }
	    	        );
	    }
	    // This is just for the case that the browser window is resized
	    var resizeTimer = null;
	    $(window).bind('resize', function() {
	        // hide all the images until we resize them
	        $('.Collage .Image_Wrapper').css("opacity", 0);
	        $winWidth = $(window).width(); 
	        if($winWidth<767){
	        	location.reload();
	   	 }
	        // set a timer to re-apply the plugin
	        if (resizeTimer) clearTimeout(resizeTimer);
	        resizeTimer = setTimeout(collage, 200);
	    });
	</script>
<!-- .main -->

<div class="main">

	<!-- .banner -->
	<div class="banner" >
	
              <div id="betalife_slide" class="owl-carousel">

                <div class="item"><img src="<?=base_url()?>resources/frontpage/imgs/slides/web_mockup_01.jpg" alt="Beta Life"></div>
                <div class="item"><img src="<?=base_url()?>resources/frontpage/imgs/slides/web_mockup_03.jpg" alt="Beta Life"></div>
                <div class="item"><img src="<?=base_url()?>resources/frontpage/imgs/slides/web_mockup_04.jpg" alt="Beta Life"></div>
                <div class="item"><img src="<?=base_url()?>resources/frontpage/imgs/slides/web_mockup_05.jpg" alt="Beta Life"></div>

              </div>
 
	<div class="clear"></div>
	</div>
	<!-- /.banner -->

	<!-- .text -->
	<div class="text" >
		<!-- .text_container -->
		<div class="text_container" id="features">
			<span>beta life</span> is an agency that develops solutions to<br> 
			help you boost your business through new media.
		</div>
	<!-- 	<div class="triangle"  >

		</div> -->
		<!-- /.text_container -->
	</div>
	<!-- ./text -->
	<!-- .works -->
	<div class="works">
		<div class="Collage " id="firstpage">	
		<?php foreach ($works as $w):?>
		<div class="Image_Wrapper" data-caption="">
		<a href="<?=site_url('works')?>/<?=$w->id?>">
		<img src="<?=base_url()?>uploads/thumbs/<?=$w->photo->filename_s?>" width="600" height="400">
		</a>
		</div>
		<?php endforeach;?>
		</div>
	</div>
	<!-- /.works -->
	<!-- .reference -->
	<div class="reference" >
		<!-- .reference_container -->
		<div class="reference_container" >
	
		<span class="subtitle">OUR FEATURES</span>
		
		
		<div class="clear"></div>
		<!-- .reference_item -->
		<div class="reference_item">
		<span>IDENTITY AND LOGO</span>
		<li><a href="#">visual identity</a></li>
		<li><a href="#">Logotype</a></li>
		<li><a href="#">Business card</a></li>
		</div>
		<div class="reference_item">
		<span>PRINT & PUBLISHING</span>
		<li><a href="#">poster</a></li>
		<li><a href="#">Greeting Card</a></li>
		<li><a href="#">Invitation</a></li>
		<li><a href="#">Brochure</a></li>
		<li><a href="#">Flyer</a></li>
		<li><a href="#">Roll-Up</a></li>
		<li><a href="#">Catalogue</a></li>
		</div>
		<div class="reference_item">
		<span>WEB & MULTIMEDIA</span>
		<li><a href="#">Institutional Site</a></li>
		<li><a href="#">Newsletter</a></li>
		<li><a href="#">banner</a></li>
		<li><a href="#">E-mailing</a></li>
		<li><a href="#">Promotion</a></li>
		<li><a href="#">Catalogue</a></li>
		</div>
		<div class="reference_item">
		<span>ILLUSTRATION</span>
		<li><a href="#">portrait</a></li>
		<li><a href="#">digital illustration</a></li>
		</div>
		<div class="reference_item">
		<span>PHOTOGRAPHY</span>
		<li><a href="#">Commerical Photography</a></li>
		<li><a href="#">Display Photography</a></li>
		<li><a href="#">Still-Life Photography</a></li>
		<li><a href="#">Digital Retouching</a></li>
		</div>
		<div class="clear"></div>
		</div>
		<!-- /.reference_item -->
		<div class="clear"></div>
	</div>
	<!-- /.reference -->
	
	
	<!-- .team -->
	<div class="team">
	<!-- .team_container -->
	<div class="team_container">
	<!-- .slogan -->
	<div class="slogan">
	WE ARE <span>BETA LIFE</span>
	</div>
	<!-- /.slogan -->
	<!-- .team_btn -->
	<div class="team_btn">
	<li>
	
	<div class="avatar">
		<img src="<?=base_url()?>/resources/frontpage/imgs/avatar_hao.png" title="Team" alt="Team" width="220">
	</div>
	<div class="profile">
		<span >Mr. Hao<br>Web Designer<br>Photographer</span>
	</div>
	</li>
	<li>
	
	<div class="avatar">
		<img src="<?=base_url()?>/resources/frontpage/imgs/avatar_wang.png" title="Team" alt="Team" width="220">
	</div>
	<div class="profile">
		<span>Mr. Wang<br>Graphic Designer<br>Illustrator</span>
	</div>
	</li>

	</div>
	<!-- /.team_btn -->
	<div class="clear"></div>
	</div>
	<!-- /.team_container -->
	<div class="triangle"></div>
	</div>
	<!-- /.team -->
	
	<!-- .followus -->
	<div class="followus" id="contact">
	<p class="subtitle">PLEASE FEEL FREE TO CONTACT US</p>
	<!-- .contact -->
	<div class="contact">
	<!-- .contact_container -->
	<div class="contact_container">
	<span class="picto_telephone">0032 (0) 472 181 053 &nbsp;/&nbsp; 0032 (0) 485 654 775</span>
	<span class="picto_mail"><a href="mailto:info@betalife.be">info@betalife.be</a></span>
		<div class="clear"></div>
	</div>
	<!-- /.contact_container -->
	</div>
	<!-- /.contact -->
	<!-- .followus_btn -->
	<div class="followus_btn">
	<li><a href="http://www.pinterest.com/betalife2013/" target="_blank"><img src="<?=base_url()?>/resources/frontpage/imgs/pintrest.png" title="pintrest" alt="pintrest" width="80"></a></li>
	<li><a href="https://www.facebook.com/pages/Beta-Life/716648805018357" target="_blank"><img src="<?=base_url()?>/resources/frontpage/imgs/facebook.png" title="facebook" alt="facebook" width="80"></a></li>
	<li><img src="<?=base_url()?>/resources/frontpage/imgs/linkedin.png" title="linkedin" alt="linkedin" width="80"></li>
	<li><img src="<?=base_url()?>/resources/frontpage/imgs/twitter.png" title="twitter" alt="twitter" width="80"></li>
	<div class="clear"></div>
	</div>
	<!-- /.followus_btn -->
	</div>
	<!-- /.followus -->
</div>
<!-- /.main -->
